import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:math' as math;

class TestContainerWidget extends StatefulWidget {
  const TestContainerWidget({super.key});

  @override
  State<TestContainerWidget> createState() {
    return _ContainerState();
  }
}

class _ContainerState extends State<TestContainerWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("基础 Container "),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Container 它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景'),
            const Text('\nContainer 容器外补白 margin: EdgeInsets'),
            Container(
              margin: EdgeInsets.all(20.0), //容器外补白
              color: Colors.orange,
              child: Text("Hello world!"),
            ),
            const Text('\nContainer 容器内补白 padding: EdgeInsets'),
            Container(
              padding: EdgeInsets.all(20.0), //容器内补白
              color: Colors.orange,
              child: Text("Hello world!"),
            ),
            const Text('\nContainer \nmargin: EdgeInsets.only(top: 50.0, left: 120.0) 容器外距离顶部 50像素，左边50像素'),
            const Text('constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0) 属于 ConstrainedBox 给容器添加宽高'),
            const Text('decoration: BoxDecoration 属于 DecoratedBox 修饰组件，颜色前景色，背景色'),
            const Text('transform: Matrix4.rotationZ(.2) 属于 Transform 组件变换 沿着z轴，垂直手机屏幕的轴进行旋转'),
            const Text('alignment: Alignment.center 属于 Align 子部件居中'),
            Container(
              margin: EdgeInsets.only(top: 50.0, left: 50.0),
              constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0),//卡片大小
              decoration: BoxDecoration(  //背景装饰
                gradient: RadialGradient( //背景径向渐变
                  colors: [Colors.red, Colors.orange],
                  center: Alignment.topLeft,
                  radius: .98,
                ),
                boxShadow: [
                  //卡片阴影
                  BoxShadow(
                    color: Colors.black54,
                    offset: Offset(2.0, 2.0),
                    blurRadius: 4.0,
                  )
                ],
              ),
              transform: Matrix4.rotationZ(.2),//卡片倾斜变换
              alignment: Alignment.center, //卡片内文字居中
              child: Text(
                //卡片文字
                "5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
